<template>
  <div class="page bgc-fff">
    <x-header title="在途上报"></x-header>
    <!-- main -->
    <div class="mt46 main">
      <!-- main-top -->
      <div class="main-top bor-bottom">
        <div class="flex a-left l-center mb15">
          <span class="red mr5">*</span>
          <span class="f16 c-000 mr15 bold">在途位置</span>
          <span class="f14 c-999">(每天至少需上报两次在途位置)</span>
        </div>
        <div class="flex a-left l-center mb10 bgc-fff bor-1-DEDEDE red f14 w275">
          <span class="ml15 mr10 line-h26">建议早上上报时间段为</span>
          <span>{{timeValData.mStartHoursVal}}-{{timeValData.mEndHoursVal}}</span>
        </div>
        <div class="flex a-left l-center bgc-fff bor-1-DEDEDE red f14 w275">
          <span class="ml15 mr10 line-h26">建议下午上报时间段为</span>
          <span>{{timeValData.aStartHoursVal}}-{{timeValData.aEndHoursVal}}</span>
        </div>
      </div>
      <!-- waybillNo -->
      <div class="flex a-between l-center pad15 bgc-fff bor-bottom">
        <div class="f16 c-445c95 flex a-left l-center">
          <i class="icon-css-dot bgc-1e90ff mr10"></i>
          <span class="bold mr5">运单：</span>
          <span>{{waybillItem.code}}</span>
        </div>
        <div class="f14 c-3fa6f3">
          <!-- 在途运输 -->
        </div>
      </div>
      <!-- position-info -->
      <div class="pad-l35 pad-r15 pad-t15 bor-bottom">
        <div class="flex a-left l-start pad-b15">
          <img :src="staticImgData.imgurla" class="icon-clocks mr25" alt="">
          <p class="f14 c-999 ta-l">本日已上报{{driverParam.alreadyLoadNum}}次位置</p>
        </div>
        <div class="flex a-left l-start pad-b15">
          <img :src="staticImgData.imgurlb" class="img-position mr25" alt="">
          <p class="f14 c-999 ta-l" style="width:1.9rem;">上报位置为：</p>
          <p class="f14 c-999 ta-l">{{driverParam.alreadyLoadPlace}}</p>
        </div>
      </div>
      <!-- location-position -->
      <div class="main-location bor-bottom">
        <div class="main-location-left bor-right" @click="nowPlaceClick">
          <img :src="staticImgData.imgurlc" alt="">
          <p>获取当前位置</p>
        </div>
        <div class="main-location-rigth">
          <span v-if='driverParam.nowLocation.nowPlace'>{{driverParam.nowLocation.nowPlace}}</span>
          <span v-else>暂无位置信息</span>
        </div>
      </div>
      <!-- report-times -->
      <div class="pad-t20 ta-c flex l-center a-around pad-l-r15">
        <span class="pad-b30 c-FFC0CB f14">还差{{driverParam.canLoadNum}}次，即可完成今日任务</span>
      </div>
      <!-- button -->
      <div class="pad-l-r15">
        <p class="large-btn bgc-01a4f6" @click="subButton">上报</p>
      </div>
    </div>
    <!-- loading -->
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from '@/components/common/loading/loading'
  import { XHeader } from 'vux'
  import { Toast } from 'mint-ui'
  import * as WaybillApi from '@/api/waybill'
  import LocationAMap from '@/utils/positionLocation/positionLocation'
  import * as SessionS from '@/utils/store/storage'
  export default {
    name: 'shipOrder-posReport',
    data() {
      return {
        staticImgData: {
          imgurla: require('@/assets/image/v1/waybill/waybill_report_position/icon_clocks.png'),
          imgurlb: require('@/assets/image/v1/waybill/waybill_report_position/icon_position.png'),
          imgurlc: require('@/assets/image/v1/waybill/waybill_report_position/icon_position2.png')
        },
        driverParam: {
          wantStartPlace: '',
          wantEndPlace: '',
          alreadyLoadPlace: '',
          alreadyLoadNum: '',
          canLoadNum: '',
          loadTime: '',
          nowLocation: {
            lat: '', // 纬度
            lon: '', // 经度
            province: '',
            city: '',
            district: '', // 区 县
            nowPlace: '', // 省-市-区
            Address: '' // 详细地址
          }
        },
        loadingShow: false,
        waybillItem: {},
        timeValData: {
          mStartHoursVal: '08:00', // 上报-上午限制开始时间字符串
          mEndHoursVal: '12:00',
          aStartHoursVal: '14:00', // 上报-下午限制开始时间字符串
          aEndHoursVal: '18:00'
        }
      }
    },
    components: {
      XHeader,
      'v-loading': Loading
    },
    created() {
      const that = this
      that.waybillItem = SessionS.getSession('waybillItem')
      // const spCode = that.waybillItem.code
      let shipTaskCode = ''
      if (that.waybillItem.shipTaskCountBos && that.waybillItem.shipTaskCountBos.length > 0) {
        shipTaskCode = that.waybillItem.shipTaskCountBos[0].taskCode
      }
      console.log('页面传值waybillItem1', that.waybillItem)
      this.waybillInit(shipTaskCode)
    },
    mounted() {
    },
    methods: {
      // 报班次数
      waybillInit: function(code) {
        const that = this
        const spCode = code
        this.loadingShow = true
        WaybillApi.getCurrrentUploadCount(spCode).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            that.driverParam.alreadyLoadNum = res.data.num
            that.driverParam.alreadyLoadPlace = res.data.position
            const p_alreadyLoadNum = parseInt(this.driverParam.alreadyLoadNum)
            if (p_alreadyLoadNum === 0) {
              this.driverParam.canLoadNum = 2
            } else if (p_alreadyLoadNum === 1) {
              this.driverParam.canLoadNum = 1
            } else {
              this.driverParam.canLoadNum = 0
            }
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('errors', res)
        })
      },
      // 在途上报
      subButton: function() {
        const that = this
        let shipTaskCode = ''
        if (that.waybillItem.shipTaskCountBos && that.waybillItem.shipTaskCountBos.length > 0) {
          shipTaskCode = that.waybillItem.shipTaskCountBos[0].taskCode
        }
        const shipToByLicenseBO = {
          shipTaskCode: shipTaskCode,
          shipmentId: that.waybillItem.id, // 装车单 id
          province: that.driverParam.nowLocation.province, // 省份
          city: that.driverParam.nowLocation.city, // 市
          location: that.driverParam.nowLocation.Address, // 详细地址
          dcx: that.driverParam.nowLocation.lon, // 经度
          dcy: that.driverParam.nowLocation.lat // 纬度
        }
        const check_res = that.checkParam(shipToByLicenseBO)
        if (check_res) {
          that.loadingShow = true
          WaybillApi.getPositionUpload(shipToByLicenseBO).then(res => {
            that.loadingShow = false
            if (res.code === 0) {
              Toast({
                message: '位置上报成功!',
                duration: 1500
              })
              this.$router.push({ name: 'driver-home' })
            }
          }).catch(res => {
            that.loadingShow = false
          })
        }
      },
      // 位置定位
      nowPlaceClick: function() {
        const that = this
        that.loadingShow = true
        // 位置信息获取-当api请求失败或成功后，执行callback回调 => function(res_data){}
        LocationAMap.getPosition(function(res_data) {
          if (res_data.status) {
            that.loadingShow = false
            Toast({
              message: '获取当前位置成功！',
              duration: 1000
            })
            that.driverParam.nowLocation = res_data.nowLocation
          } else {
            that.loadingShow = false
            Toast({
              message: '获取当前位置失败！',
              duration: 1000
            })
          }
        })
      },
      checkParam: function(param) {
        // 信息填写提示
        const check_param = param
        if (check_param.location === '') {
          Toast({
            message: '请先获取位置信息!',
            duration: 1500
          })
          return
        }
        return true
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
  }
  /* .bor-bottom:after {
    top: 98%;
  } */
  .line-h26{
    line-height: .26rem;
  }
  .w140{
    width: 1.4rem;
  }
  .w275{
    width: 2.75rem;
  }
  .mr25{
    margin-right: .25rem;
  }
  div>span{
    display: block;
  }
  /* main */
  .main-top{
    /* height: .4rem;
    line-height: .4rem; */
    font-size: .14rem;
    /* color: #666; */
    color: #999;
    background-color: #f5f9fd;
    text-align: left;
    padding: .2rem .15rem 0.15rem .15rem;
  }
  .icon-clocks {
    width: .13rem;
    height: .13rem;
  }
  .img-position{
    width: .13rem;
    height: .15rem;
  }
</style>
